<template>
  <div>
    <van-nav-bar title="首页" />
    <swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <swipe-item>
        <img
          src="https://img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png"
          alt=""
        />
      </swipe-item>
      <swipe-item>
        <img
          src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg"
          alt=""
        />
      </swipe-item>
      <swipe-item>
        <img
          src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg"
          alt=""
        />
      </swipe-item>
      <swipe-item>
        <img
          src="https://gtms02.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg"
          alt=""
        />
      </swipe-item>
    </swipe>
    <div>这是首页</div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
export default {
  data() {
    return {};
  },
  components: {
    Swipe,
    SwipeItem,
  },
};
</script>

<style scoped>
.van-nav-bar__title {
  font-size: 18px;
  font-weight: 800;
}
.my-swipe .van-swipe-item {
  color: #fff;
  background-color: #39a9ed;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
}
</style>
